﻿<!DOCTYPE html>

<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>どうぶつしょうぎ</title>

    <!-- for mobile devices -->
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no"/>
    <!--<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="apple-touch-icon" href="img/lion0.png" />

    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
    <!--<script type="text/javascript" src="js/jquery/jquery.mobile-1.1.0.js"></script>-->
    <script type="text/javascript" src="js/jquery/jquery-ui-1.8.18.custom.min.js"></script> 
    <!--<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.css"/>-->
    <link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.18.custom.css" />

    <!-- Mersenne Twister -->
    <script type="text/javascript" src="js/mt.js"></script>
    <!-- JSDeffered -->
    <script type="text/javascript" src="js/jsdeferred.jquery.js"></script>

    <!-- どうぶつしょうぎ -->
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/dobutsushogi.js"></script>
    <script type="text/javascript">

        var Player = function (view, afterClickCallback) {
            /// <summary>
            /// プレイヤーabstract
            /// </summary>
            this.view = view;
            this.afterClickCallback = afterClickCallback;
        };
        Player.prototype = {
            act: function () {
            },
            onClickCell: function () {
            }
        };

        var ManPlayer = function (view, afterClickCallback) {
            /// <summary>
            /// 人間プレイヤー
            /// </summary>
            this.view = view;
            this.afterClickCallback = afterClickCallback;
        };
        ManPlayer.prototype = new Player(null, null);
        ManPlayer.prototype.act = function () {
            // manはclickイベント駆動のため、こでは何もできない。
            // onclickからafterClickCallbackで次の段階へいく。
        };
        ManPlayer.prototype.onClickCell = function (event, elem) {
            var pos = BoardPosition.fromCoordinate(elem.position());
            var view = this.view;
            var action;
            // 自分の駒を選択時（動かす）
            if (view.isSelectingManPiece(elem, pos)) {
                view.selectManPiece(pos);
            }
            // 置く先が出てるとき
            else if (view.isReadyToPlace(pos)) {
                action = view.beginPlacing(pos);
                this.afterClickCallback(action);
            }
            // 移動先が出てるとき
            else if (view.isReadyToMove(pos)) {
                action = view.beginMoving(pos);
                this.afterClickCallback(action);
            }
        };

        var ComPlayer = function (view, afterClickCallback, aiName) {
            /// <summary>
            /// COMプレイヤー
            /// </summary>
            this.view = view;
            this.afterClickCallback = afterClickCallback;
            this.aiName = aiName;
        };
        ComPlayer.prototype = new Player(null, null);
        ComPlayer.prototype.act = function () {

            var board = this.view.getBoard();
            var ai;
            switch (this.aiName) {
                case "random":
                    ai = new AIEngine_Random(board, PlayerTurn.com); break;
                case "1":
                    ai = new AIEngine_Simple(board, PlayerTurn.com); break;
                case "negamax":
                    ai = new AIEngine_NegaMax(board, PlayerTurn.com); break;
                case "negaab":
                    ai = new AIEngine_NegaAlphaBeta(board, PlayerTurn.com); break;
                case "montecarlo":
                    ai = new AIEngine_MonteCarlo(board, PlayerTurn.com); break;
            }

            var action = ai.think();
            //pp("先読み: " + ai.nodeNum + "局面");
            this.afterClickCallback(action);

            //p(board.inspect());
        };
        ComPlayer.prototype.onClickCell = function (event, elem) {
            // comはすべてAIで駆動。セルのクリックでは何もしない。
        };
        ComPlayer.prototype.getAIName = function () {
            return this.aiName;
        };
        //ComPlayer.prototype.setAIName = function (value) {
        //   this.aiName = value;
        //};



        var PlacingPiece = function (index, value) {
            /// <summary>
            /// 置こうとしている駒情報の構造体
            /// </summary>
            this.index = index; // 手駒のインデックス (0~5)
            this.value = value; // 手駒の値(Piece)
        };



        function View() {
            /// <summary>
            /// どうぶつしょうぎUI制御
            /// </summary>

            var _board;
            var _handPieces;
            var _players;
            var _beforePos;
            var _movablePositions;
            var _placeablePositions;
            var _uiDisabled;
            var _placingPiece;
            var _self = this;

            // -------------------------- public --------------------------------

            this.initialize = function () {
                /// <summary>
                /// 初期化
                /// </summary>
                this.initializeParams();
                this.showPieces();
                // registerClickEventsは呼ばない。1度だけしか呼んじゃダメなので明示的に。
            };
            this.initializeParams = function () {
                /// <summary>
                /// 変数初期化
                /// </summary>
                _board = Board.createDefaultBoard();
                //_board = Board.createTestBoard2();
                _handPieces = [new Array(6), new Array(6)];
                _players = [new ManPlayer(this, updateBoard), new ComPlayer(this, updateBoard, null)];
                _beforePos = null;
                _movablePositions = [];
                _placeablePositions = [];
                _placingPiece = null;
                _uiDisabled = false;
            };
            this.showPieces = function () {
                /// <summary>
                /// _board変数の内容に従い駒を配置
                /// </summary>
                $('#board > div.piece').remove();
                $('#board > div.piece-hand').remove();
                _board.eachPiece(function (piece, row, col) {
                    var div = createPiece(piece, row, col);
                    $('#board').append(div);
                });
            };
            this.registerClickEvents = function () {
                /// <summary>
                /// イベントハンドラの設定
                /// </summary>        
                var clickEvent = getClickEventName();
                $(".piece").on(clickEvent, function (event) {
                    onClickEvent(event, $(this));
                    // Stop event handling in non-IE browsers:
                    event.preventDefault();
                    event.stopPropagation();
                    // Stop event handling in IE
                    return false;
                });
                $("#board td.cell").on(clickEvent, function (event) {
                    onClickEvent(event, $(this));
                    event.preventDefault();
                    event.stopPropagation();
                    return false;
                });/*
                $(document).on(clickEvent, ".piece-hand", function (event) {
                    onClickHand(event, $(this));
                    alert(event);
                    // Stop event handling in non-IE browsers:
                    event.preventDefault();
                    event.stopPropagation();
                    // Stop event handling in IE
                    return false;
                });*/
            };
            this.unregisterClickEvents = function () {
                /// <summary>
                /// イベントハンドラの登録解除
                /// </summary>
                $("div.piece").off();
                $("td.cell").off();
                $("div.piece-hand").off();
                _uiDisabled = true;
            };

            this.showSettingDialog = function () {
                /// <summary>
                /// 対局設定ダイアログを出す
                /// </summary>    
                var options = {
                    title: "対局設定",
                    buttons: {
                        "対局": function (event) {
                            _board.turn = parseInt($("input[name=radio-order]").filter(":checked").val());
                            _players[1].aiName = $("input[name=radio-ai]").filter(":checked").val();
                            $(this).dialog("close");
                            // 一旦ターンを逆にしておいて、toggleTurnでゲーム起動
                            _board.toggleTurn();
                            var waitTime = (_board.turn == PlayerTurn.man) ? 333 : 0;
                            setTimeout(toggleTurn, waitTime);
                        }
                    }
                };
                $("#dialog-selectable").dialog("option", options).dialog("open");
            };

            this.isSelectingManPiece = function (elem, pos) {
                return elem.hasClass("piece") && _board.isSelfPiece(pos);
            };
            this.selectManPiece = function (pos) {
                clearMovablePositions();
                // 同じ場所クリックはキャンセル
                if (_beforePos != null && pos.equals(_beforePos)) {
                    initializePieceFlags();
                    return;
                }

                // いける場所を表示
                initializePieceFlags();
                getCellAt(pos).addClass('cell-active');
                _movablePositions = _board.getMovablePositions(pos.toIndex(), _board.turn);
                displayMovablePositions(_movablePositions);
                _beforePos = pos;
            };
            this.isReadyToPlace = function (pos) {
                return (_placeablePositions.length > 0) && 
                    (jQuery.inArray(pos.toIndex(), _placeablePositions) >= 0);
            };
            this.beginPlacing = function (pos) {
                _uiDisabled = true;
                var place = new Place(pos.toIndex(), _placingPiece.value, _placingPiece.index);
                var action = new Action(ActionType.place, place, _board, null);
                clearMovablePositions();
                initializePieceFlags();
                return action;
            };
            this.isReadyToMove = function (pos) {
                return (_movablePositions.length > 0) && 
                (jQuery.inArray(pos.toIndex(), _movablePositions) >= 0);
            };
            this.beginMoving = function (pos) {
                _uiDisabled = true;
                var move = new Move(_beforePos.toIndex(), pos.toIndex());
                var action = new Action(ActionType.move, move, _board, null);
                clearMovablePositions();
                initializePieceFlags();
                return action;
            };
            this.error = function (fmt) {
                var args = [];
                for (var i = 1; i < arguments.length; i++) {
                    if (typeof arguments[i] === "undefined")
                        args[i - 1] = "undefined";
                    else if (arguments[i] == null)
                        args[i - 1] = "null";
                    else
                        args[i - 1] = arguments[i];
                }
                fmt = "\"" + fmt + "\"";
                args.unshift(fmt);
                var argsStr = args.join(",");
                p(argsStr);
                var msg = eval("$.format(" + argsStr + ");");
                alert(msg);
                unregisterClickEvents();
            };

            this.getBoard = function () { return _board; }
            this.getHandPieces = function () { return _handPieces; }


            // -------------------------- private --------------------------------


            function initializePieceFlags() {
                _beforePos = null;
                _movablePositions = [];
                _placeablePositions = [];
            }
            function getClickEventName() {
                /// <summary>
                /// デバイスに応じたtapイベント名を返す。
                /// </summary>
                var userAgent = navigator.userAgent.toLowerCase();
                var isMobileApple = ((userAgent.indexOf('iphone') >= 0 || userAgent.indexOf('ipad') >= 0) &&
                                userAgent.indexOf('ipod') < 0);
                //var isMobileOpera = (userAgent.indexOf('opera movi') >= 0);
                var isAndroid = (userAgent.indexOf('android') >= 0);
                var isWindowPhone = (userAgent.indexOf('windows phone') >= 0);
                return (isMobileApple || isAndroid || isWindowPhone) ? 'touchend' : 'click';
            }

            function onClickEvent(event, elem) {
                /// <summary>
                /// cellまたはpiece要素をtapしたときの処理。
                /// COMプレイヤも仮想的にクリックしたとみなしてこの関数を呼ぶ。
                /// </summary>
                if (_uiDisabled)
                    return;
                // 手駒クリック時(人間のみ)
                if (elem.hasClass("piece-hand")) {
                    onClickHand(event, elem);
                } else {
                    // それ以外は駒・マスのクリックとする
                    _players[_board.turn].onClickCell(event, elem);
                }
            }
            function onClickHand(event, elem) {
                /// <summary>
                /// 手駒(piece-hand)要素をtapしたときの処理
                /// </summary>
                if (_uiDisabled)
                    return;

                initializePieceFlags();
                clearMovablePositions();

                var m = elem.attr("id").match(/piece-hand(\d)_(\d)/);
                var turn = parseInt(m[1]);
                var index = parseInt(m[2]);
                if (_placingPiece != null && _placingPiece.index == index) {
                    _placingPiece = null;
                    return;
                }
                _placingPiece = new PlacingPiece(index, _handPieces[turn][index]);
                _placeablePositions = _board.getPlaceablePositions(_placingPiece.value);
                displayPlaceablePositions();
                getHandCellAt(turn, index).addClass('cell-active');
            }

            function toggleTurn() {
                /// <summary>
                /// 手番を入れ替え
                /// </summary>     
                _board.toggleTurn();
                // 勝敗チェック
                if (_board.isDeadLion(_board.turn)) {
                    endGame(_board.turn != PlayerTurn.man);
                }
                else if (_board.triesLion(_board.turn)) {
                    endGame(_board.turn == PlayerTurn.man);
                }
                // 続行
                else {
                    _uiDisabled = (_board.turn == PlayerTurn.com);
                    _players[_board.turn].act();
                }
            }

            function endGame(wonMan) {
                /// <summary>
                /// ゲーム終了ダイアログ
                /// </summary>
                _uiDisabled = true;

                var options = {
                    title: "あなたの" + ((wonMan) ? "勝ちです" : "負けです"),
                    buttons: {
                        "はい": function (event) {
                            _self.initialize();
                            _self.showSettingDialog();
                            $(this).dialog("close");
                        },
                        "いいえ": function (event) {
                            $(this).dialog("close");
                        }
                    }
                };
                $("#dialog-yesno").children("p").text("もう一回する？");
                $("#dialog-yesno").dialog("option", options).dialog("open");
            }

            function updateBoard(action) {
                /// <summary>
                /// プレイヤーから指示が返ってきた後のコールバック処理
                /// </summary>
                var c = action.content
                switch (action.type) {
                    case ActionType.move:
                        var movedPiece = _board.get(c.fromPos);
                        var bpFrom = BoardPosition.fromIndex(c.fromPos);
                        var bpTo = BoardPosition.fromIndex(c.toPos);
                        var gotPiece = _board.move(c.fromPos, c.toPos, _board.turn);                        
                        if (gotPiece != Piece.empty) {
                            movePieceToHand(bpTo, gotPiece, _board.turn);
                        }
                        movePieceOnBoard(bpFrom, bpTo, movedPiece);
                        break;
                    case ActionType.place:
                        _board.place(c.pos, c.piece, _board.turn);
                        var index = c.handIndex || jQuery.inArray(c.piece, _handPieces[_board.turn]);
                        var bpPos = BoardPosition.fromIndex(c.pos);
                        movePieceToBoard(index, bpPos);
                        break;
                    default:
                        error("fatal error at updateBoard [Unexpected action type ({0})]", action.type);
                        break;
                }
                //pp("評価値: " + _board.evaluate());
                pp(_board.sphereString());
            }

            function createPiece(piece, row, col) {
                /// <summary>
                /// (row, col)の位置に駒を配置
                /// </summary>
                var top = row * 80;
                var left = col * 80;
                var img = $("<img />").attr({ "width": 80, "height": 80, "alt": Piece.name(piece), "src": Piece.imagePath(piece) });
                var div = $("<div></div>").attr({ "id": $.format("piece{0}_{1}", row, col) })
                        .addClass("piece").css({ "top": top, "left": left });
                return div.append(img);
            }

            function getCellAt(pos) {
                /// <summary>
                /// 指定した(row, col)の位置のcell要素を返す
                /// </summary>
                return $("#cell" + pos.row + "_" + pos.col);
            }
            function getHandCellAt(turn, index) {
                /// <summary>
                /// 指定した位置の手駒cell要素を返す
                /// </summary>
                return $("#cell-hand" + turn + "_" + index);
            }
            function getPieceAt(pos) {
                /// <summary>
                /// 指定した(row, col)の位置のpiece要素を返す
                /// </summary>
                return $("#piece" + pos.row + "_" + pos.col);
            }
            function getHandPieceAt(turn, index) {
                /// <summary>
                /// 指定した位置の手駒piece要素を返す
                /// </summary>
                return $("#piece-hand" + turn + "_" + index);
            }

            function displayMovablePositions() {
                /// <summary>
                /// _movablePositionsに入っている座標をもとに、選択中の駒が進めるセルをハイライト
                /// </summary>
                for (var i = 0; i < _movablePositions.length; i++) {
                    var pos = BoardPosition.fromIndex(_movablePositions[i]);
                    getCellAt(pos).addClass('cell-movable');
                }
            }
            function displayPlaceablePositions() {
                /// <summary>
                /// _placeblePositionsに入っている座標をもとに、駒を置けるセルをハイライト
                /// </summary>
                for (var i = 0; i < _placeablePositions.length; i++) {
                    var pos = BoardPosition.fromIndex(_placeablePositions[i]);
                    getCellAt(pos).addClass('cell-placeable');
                }
            }
            function clearMovablePositions() {
                /// <summary>
                /// displayMovablePositionsのハイライトを消す
                /// </summary>
                $("td.cell").removeClass('cell-movable').removeClass('cell-placeable').removeClass('cell-active');
                $("td.cell-hand").removeClass('cell-active');
            }
            function movePieceOnBoard(fromPos, toPos, movedPiece) {
                /// <summary>
                /// 盤上のマス間の駒の移動
                /// </summary>
                getPieceAt(fromPos).animate(
                    { left: toPos.col * 80, top: toPos.row * 80 },
                    {
                        duration: 400,
                        queue: false,
                        complete: function () {
                            $(this).attr({ "id": $.format("piece{0}_{1}", toPos.row, toPos.col) });
                            $(this).children("img").attr({ "src": Piece.imagePath(movedPiece) });
                            var waitTime = (_board.turn == PlayerTurn.man) ? 333 : 0;
                            setTimeout(toggleTurn, waitTime);
                        }
                    });
            }
            function movePieceToBoard(handIndex, newPos) {
                /// <summary>
                /// 手駒を盤面へ移動
                /// </summary>
                unregisterHandPiece(handIndex);

                var pieceObj = getHandPieceAt(_board.turn, handIndex);
                pieceObj.css({ "z-index": 100 });
                pieceObj.children("img").attr({ "width": 80, "height": 80 });

                pieceObj.animate(
                    {
                        "left": newPos.col * 80,
                        "top": newPos.row * 80
                    },
                    {
                        duration: 400,
                        queue: false,
                        easing: "swing",
                        complete: function () {
                            $(this).css({ "z-index": 1 })
                                    .attr({ "id": $.format("piece{0}_{1}", newPos.row, newPos.col) })
                                    .removeClass("piece-hand").addClass("piece");
                            var waitTime = (_board.turn == PlayerTurn.man) ? 333 : 0;  // この時点で逆転済みなので条件も逆
                            setTimeout(toggleTurn, waitTime);
                    }
                });
            }

            function movePieceToHand(pos, pieceVal) {
                /// <summary>
                /// 取った相手の駒を手駒へ移動
                /// </summary>
                var pieceObj = getPieceAt(pos);

                pieceObj.css({ "z-index": 1000 });
                pieceObj.children("img")
                    .attr({ "width": 60, "height": 60, "src": Piece.imagePath(pieceVal) });
                var handIndex = registerHandPiece(pieceVal);
                pieceObj.animate(
                    {
                        "left": handIndex * 40 - 10,
                        "top": (_board.turn == PlayerTurn.man) ? 330 : -80
                    },
                    {
                        duration: 400,
                        queue: false,
                        easing: "swing",
                        complete: function () {
                            $(this).css({ "z-index": 10 })
                                    .attr({ "id": $.format("piece-hand{0}_{1}", _board.turn, handIndex) })
                                    /*.removeClass("piece")*/.addClass("piece-hand");
                        }
                    }
                );
            }
            function registerHandPiece(pieceVal) {
                /// <summary>
                /// 手駒に駒を追加する
                /// </summary>
                var myHand = _handPieces[_board.turn];
                for (var i = 0; i < myHand.length; i++) {
                    if (myHand[i] == null) {
                        myHand[i] = pieceVal;
                        return i;
                    }
                }
                this.error("Fatal error at '_registerHandPiece'");
            }
            function unregisterHandPiece(index) {
                /// <summary>
                /// 手駒から駒を削除する
                /// </summary>
                _handPieces[_board.turn][index] = null;
            }
        }

        /*
        for (var i = 0; i < 3; i++) {
            //(function (arg) {
            //setTimeout(function () { p(arg); }, arg*1000);
            //})(i);
        }
        //*/

        $(function () {
            Deferred.define();

            $.preLoadImages('img/niwatori0.png', 'img/niwatori1.png');

            var view = new View();
            view.initialize();
            view.registerClickEvents();

            $("#setting-order").buttonset();
            $("#setting-ai").buttonset();
            $("#dialog-yesno").dialog({
                "autoOpen": false,
                "width": 240,
                "modal": true,
                "resizable": false,
                "position": "center",
                "draggable": false,
                "closeOnEscape": false
            });
            $("#dialog-selectable").dialog({
                "autoOpen": false,
                "width": 280,
                "height": 320,
                "modal": true,
                "resizable": false,
                "position": "center",
                "draggable": false,
                "closeOnEscape": false
            });

            view.showSettingDialog();

            //pp(navigator.userAgent);
        });

    </script>
    <link rel="stylesheet" type="text/css" href="css/dobutsushogi.css"/>
</head>
<body>
    <div id="header-root">
        <div id="header-title">
            <h1>どうぶつしょうぎ</h1>
        </div>
        <div id="header-links">
            <ul>
                <li>
                    <a href="http://www.joshi-shogi.com/doubutsushogi/2009/08/rule.html" target="_blank">あそびかた</a>
                </li>
                <li>
                    <a href="http://putiya.com/index.html" target="_blank">画像素材</a>  
                </li>
            </ul>
        </div>
    </div>

    <div id="board-root">
        <div id="hand1" class="hand">
            <table class="hand-lines" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td id="cell-hand1_0" class="cell-hand"></td>
                    <td id="cell-hand1_1" class="cell-hand"></td>
                    <td id="cell-hand1_2" class="cell-hand"></td>
                    <td id="cell-hand1_3" class="cell-hand"></td>
                    <td id="cell-hand1_4" class="cell-hand"></td>
                    <td id="cell-hand1_5" class="cell-hand"></td>
                </tr>
            </tbody>
            </table>
        </div>

        <div class="label-h" id="label-A">A</div>
        <div class="label-h" id="label-B">B</div>
        <div class="label-h" id="label-C">C</div>
        <div class="label-v" id="label-1">1</div>
        <div class="label-v" id="label-2">2</div>
        <div class="label-v" id="label-3">3</div>
        <div class="label-v" id="label-4">4</div>

        <div id="board" data-role="none">
            <table id="board-lines" cellspacing="0" cellpadding="0">
            <tbody>
                <tr><td id="cell0_0" class="cell"></td><td id="cell0_1" class="cell"></td><td id="cell0_2" class="cell"></td></tr>
                <tr><td id="cell1_0" class="cell"></td><td id="cell1_1" class="cell"></td><td id="cell1_2" class="cell"></td></tr>
                <tr><td id="cell2_0" class="cell"></td><td id="cell2_1" class="cell"></td><td id="cell2_2" class="cell"></td></tr>
                <tr><td id="cell3_0" class="cell"></td><td id="cell3_1" class="cell"></td><td id="cell3_2" class="cell"></td></tr>
            </tbody>
            </table>
        </div>

        <div id="hand0" class="hand">
            <table class="hand-lines" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td id="cell-hand0_0" class="cell-hand"></td>
                    <td id="cell-hand0_1" class="cell-hand"></td>
                    <td id="cell-hand0_2" class="cell-hand"></td>
                    <td id="cell-hand0_3" class="cell-hand"></td>
                    <td id="cell-hand0_4" class="cell-hand"></td>
                    <td id="cell-hand0_5" class="cell-hand"></td>
                </tr>
            </tbody>
            </table>
        </div>
    </div>

    <div id="dialog-yesno" class="dialog">
	    <p>もう一回やる？</p>
    </div>

    <div id="dialog-selectable" class="dialog">
        <div id="setting-root">
            <fieldset id="setting-order" class="ui-widget ui-widget-content">
                <legend>あなたの順番</legend>
                <label for="radio-order-0">先手</label>
                <input type="radio" id="radio-order-0" name="radio-order" value="0" checked="checked" />
                <label for="radio-order-1">後手</label>
                <input type="radio" id="radio-order-1" name="radio-order" value="1" />
            </fieldset>
            <fieldset id="setting-ai" class="ui-widget ui-widget-content">
                <legend>コンピュータの思考</legend>
                <div>
                    <input type="radio" id="radio-ai-negaab" name="radio-ai" value="negaab" checked="checked" />
                    <label for="radio-ai-negaab">5手読み(Nega α-β)</label>
                </div><div>
                    <input type="radio" id="radio-ai-negamax" name="radio-ai" value="negamax" />
                    <label for="radio-ai-negamax">5手読み(NegaMax)</label>
                </div><div>
                    <input type="radio" id="radio-ai-montecarlo" name="radio-ai" value="montecarlo" />
                    <label for="radio-ai-montecarlo">原始モンテカルロ</label>
                </div><div>
                    <input type="radio" id="radio-ai-1" name="radio-ai" value="1" />
                    <label for="radio-ai-1">1手読み</label>
                </div><div>
                    <input type="radio" id="radio-ai-random" name="radio-ai" value="random" />
                    <label for="radio-ai-random">適当</label>
                </div>
            </fieldset>
        </div>
    </div>

    <div id="debug">
        debug logs:
        <select id="debug-logs" size="1" data-role="none">
        </select>
    </div>
</body>
</html>